import 'package:flutter/material.dart';
import 'pages/Tabs.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: false,
        primarySwatch: Colors.blue,
      ),
      home: const MyHome(),
      //去掉右上角debug图标
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHome extends StatefulWidget {
  const MyHome({super.key});

  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin {
  //tab控制组件
  late TabController _tabController;

  //生命周期函数,当组件初始化时就会触发
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 9, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //配置左侧widget
        leading: IconButton(
          icon: const Icon(Icons.menu),
          onPressed: (){
            print("左侧按钮图标");
          },
        ),
        title: const Text("Flutter App"),
        //配置右侧widget,可配置多个
        actions: [
          IconButton(onPressed: (){}, icon: const Icon(Icons.search)),
          IconButton(onPressed: (){}, icon: const Icon(Icons.menu)),
        ],
        //配置选项卡
        bottom: TabBar(
          isScrollable : true,    //配置tab可以滑动
          indicatorColor: Colors.red, //配置指示器颜色
          indicatorWeight: 2, //配置指示器的高度
          indicatorPadding: const EdgeInsets.all(2),
          indicatorSize: TabBarIndicatorSize.tab, //配置指示器size
          indicator: BoxDecoration(
            color: Colors.lightGreen, //配置tab指示器颜色
            borderRadius: BorderRadius.circular(10), //配置圆角
          ),
          //配置选中指示器的字体样式
          labelStyle: const TextStyle(
            fontSize: 14
          ),
          unselectedLabelColor: Colors.black,  //配置未被选中的指示器的字体颜色
          //配置未选中指示器的字体样式
          unselectedLabelStyle: const TextStyle(
            fontSize: 12
          ),
          controller: _tabController,
          tabs: const [
            Tab(child: Text("关注"),),
            Tab(child: Text("热门"),),
            Tab(child: Text("视频"),),
            Tab(child: Text("关注"),),
            Tab(child: Text("热门"),),
            Tab(child: Text("视频"),),
            Tab(child: Text("关注"),),
            Tab(child: Text("热门"),),
            Tab(child: Text("视频"),),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: const [
          ListTile(title: Text("我是关注列表"),),
          ListTile(title: Text("我是热门列表"),),
          ListTile(title: Text("我是视频列表"),),
          ListTile(title: Text("我是关注列表"),),
          ListTile(title: Text("我是热门列表"),),
          ListTile(title: Text("我是视频列表"),),
          ListTile(title: Text("我是关注列表"),),
          ListTile(title: Text("我是热门列表"),),
          ListTile(title: Text("我是视频列表"),),
        ],
      ),
    );
  }
}


